import { cloneDeep } from "lodash-es";
import { ref } from "vue";
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
export type MenuListItemType = {
  router: string;
  name: string;
  routeName: string;
  activeStatus?: (status: number) => boolean;
  disabled?: boolean;
};
const menuList: MenuListItemType[] = [
  {
    router: "/basicinfo",
    name: "项目基本信息",
    routeName: "ProjectBasicInfo",
    activeStatus: () => true,
  },
  {
    router: "/indicator",
    name: "指标筛选",
    routeName: "ProjectIndicator",
    activeStatus: (status: number | "") =>
      status !== "" && status >= 0 && status < 100,
  },
  // {
  //   router: "team",
  //   name: "团队管理",
  // },
  {
    router: "/fill",
    name: "资料填报",
    routeName: "ProjectFill",
    activeStatus: (status: number) => status >= 200,
  },
  {
    router: "/approval",
    name: "项目终审",
    routeName: "ProjectApproval",
    activeStatus: (status: number) => status >= 700,
  },
  {
    router: "/credentials",
    name: "颁发证书",
    routeName: "ProjectCredentials",
    activeStatus: (status: number) => status >= 1000,
  },
];
const useUserProjectDetail = () => {
  const route = useRoute();
  const router = useRouter();
  return {
    breadcrumbList: [
      {
        name: "项目列表",
        click: () => router.push({ name: "Projects" }),
      },
      {
        name: "项目详情",
        click: () =>
          route.name === "ProjectFillDetail" &&
          router.push({
            name: "ProjectFill",
            params: route.params,
          }),
      },
      {
        name: "指标详情",
        hidden: () => route.name !== "ProjectFillDetail",
      },
    ],
    menus: cloneDeep(menuList),
  };
};
const useApprovalProjectDetail = () => {
  const route = useRoute();
  const router = useRouter();
  return {
    breadcrumbList: [
      {
        name: "项目列表",
        click: () => router.push({ name: "ApprovalProjects" }),
      },
      {
        name: "项目评审",
        click: () =>
          route.name === "ApprovalProjectFillDetail" &&
          router.push({
            name: "ApprovalProjectFill",
            params: route.params,
          }),
      },
      {
        name: "指标详情",
        hidden: () => route.name !== "ApprovalProjectFillDetail",
      },
    ],
    menus: cloneDeep(
      menuList.reduce<MenuListItemType[]>((arr, item) => {
        if ("ProjectBasicInfo" === item.routeName) {
          return arr.concat(item);
        } else if ("ProjectFill" === item.routeName) {
          return arr.concat({
            ...item,
            name: "项目评审",
            activeStatus: () => true,
          });
        }
        return arr;
      }, [])
    ),
  };
};

const useBackendProjectDetail = () => {
  const route = useRoute();
  const router = useRouter();
  return {
    breadcrumbList: [
      {
        name: "项目列表",
        click: () => router.push({ name: "BackendProjects" }),
      },
      {
        name: "项目详情",
        click: () =>
          route.name === "BackendProjectFillDetail" &&
          router.push({
            name: "BackendProjectFill",
            params: route.params,
          }),
      },
      {
        name: "指标详情",
        hidden: () => route.name !== "BackendProjectFillDetail",
      },
    ],
    menus: cloneDeep(
      menuList.reduce<MenuListItemType[]>((arr, item) => {
        if (
          [
            "ProjectBasicInfo",
            "ProjectApproval",
            "ProjectCredentials",
          ].includes(item.routeName)
        ) {
          return arr.concat(item);
        } else if ("ProjectFill" === item.routeName) {
          return arr.concat({
            ...item,
            name: "项目指标",
            activeStatus: (status: number) => status >= 100,
          });
        }
        return arr;
      }, [])
    ),
  };
};

export const useProjectDetail = () => {
  const route = useRoute();
  const router = useRouter();
  const hooks = route.fullPath.startsWith("/approval")
    ? useApprovalProjectDetail
    : route.fullPath.startsWith("/backend")
    ? useBackendProjectDetail
    : useUserProjectDetail;
  const { breadcrumbList, menus } = hooks();
  const menuList = ref(menus);
  const routeNamePrefix = route.fullPath.startsWith("/approval")
    ? "Approval"
    : route.fullPath.startsWith("/backend")
    ? "Backend"
    : "";
  const initMenuDisabled = (route: any, isInit?: boolean) => {
    menuList.value.forEach((item) => {
      const routeName = routeNamePrefix + item.routeName;
      const res = item.activeStatus?.(route.params.status);
      if (isInit && res) {
        router.replace({ name: routeName, params: route.params });
      }
      item.disabled =
        !isInit && route.name === routeName && routeName === "ProjectFill"
          ? false
          : !res;
    });
  };
  initMenuDisabled(route, true);
  onBeforeRouteUpdate((to) => {
    initMenuDisabled(to);
  });
  return {
    breadcrumbList,
    menuList,
    routeNamePrefix,
  };
};
